<template>
	<block>
		<!-- #ifdef APP-PLUS || MP-TOUTIAO -->
		<button v-if="type==1" :class="['sqbtn',cname]" :style="[{width:w+'rpx',height:h+'rpx',lineHeight:h+'rpx',},sname]"
		 @click="getUserInfo">{{t}}</button>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-ALIPAY -->
		<button v-if="type==1" :class="['sqbtn',cname]" :style="[{width:w+'rpx',height:h+'rpx',lineHeight:h+'rpx',},sname]"
		 :open-type="platform=='ali'?'getAuthorize':'getUserInfo'" @getuserinfo="mpGetUserInfo" scope='userInfo'
		 @getAuthorize="onGetAuthorize">{{t}}</button>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN || MP-BAIDU -->
		<button v-if="type==2" :class="['sqbtn',cname]" :style="[{width:w+'rpx',height:h+'rpx',lineHeight:h+'rpx',},sname]"
		 open-type="getPhoneNumber" @getphonenumber="mpGetphonenumber">{{t}}</button>
		<!-- #endif -->
		<!-- 触发用户转发 -->
		<!-- #ifndef H5 -->
		<button @click="this.$emit('refresh')" hover-class='be' v-if="type==3" :class="['sqbtn',cname]" :style="[{width:w+'rpx',height:h+'rpx',lineHeight:h+'rpx',},sname]"
		 open-type="share">{{t}}</button>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<button hover-class='be' v-if="type==3" :class="['sqbtn',cname]" :style="[{width:w+'rpx',height:h+'rpx',lineHeight:h+'rpx',},sname]"
		 @click="share">{{t}}</button>
		<!-- #endif -->
	</block>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		name: 'sq-btn',
		props: {
			cname: '',
			sname: '',
			w: '',
			h: '',
			t: '',
			type: {
				type: String,
				default: '1',
			}, //1用户信息，2手机号3瓜分红包
			storeid: {
				type: String,
				default: '',
			},
		},
		data() {
			return {}
		},
		watch: {
			// sname: {
			// 	handler(newVal) {
			// 		console.log('newVal', newVal)
			// 	},
			// 	immediate: true
			// },
		},
		methods: {
			share() {
				uni.showModal({
					title: '提示',
					content: '点击右上角分享',
					showCancel: false,
					confirmText: '我知道了'
				})
			},
			onGetAuthorize(res) {
				// console.log('onGetAuthorize', res)
				my.getOpenUserInfo({
					fail: (res) => {},
					success: (res) => {
						// console.log('my.getOpenUserInfo', JSON.parse(res.response).response)
						let result = JSON.parse(res.response).response
						this.refreshUser({
							storeId: this.storeid,
							portrait: result.avatar,
							userName: result.nickName,
							userId: this.uId,
						}).then(res => {
							this.$emit('refresh')
						})
					}
				});
			},
			// 获取用户信息 API 在小程序可直接使用，在 5+App 里面需要先登录才能调用
			getUserInfo() {
				uni.getUserInfo({
					success: (result) => {
						// #ifdef MP-TOUTIAO
						let portrait = result.userInfo.avatarUrl,
							userName = result.userInfo.nickName,
							userId = this.user.userId
						// #endif
						this.refreshUser({
							storeId: this.storeid,
							portrait,
							userName,
							userId
						}).then(res => {
							this.$emit('refresh')
						})
						console.log('getUserInfo success', result);
					},
					fail: (error) => {
						console.log('getUserInfo fail', error);
						uni.showModal({
							title: '温馨提示',
							content: '获取头像等信息失败',
							showCancel: false
						});
					}
				});
			},
			mpGetUserInfo(result) {
				console.log('mpGetUserInfo', result);
				if (result.detail.errMsg == 'getUserInfo:ok') {
					let portrait = result.detail.userInfo.avatarUrl,
						userName = result.detail.userInfo.nickName,
						userId = this.user.userId
					this.refreshUser({
						storeId: this.storeid,
						portrait,
						userName,
						userId
					}).then(res => {
						this.$emit('refresh')
					})
					console.log(portrait, userName, userId)
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '获取头像等信息失败',
						showCancel: false
					});
					return;
				}
			},
			mpGetphonenumber(result) {
				console.log('mpGetphonenumber', result);
				if (result.detail.errMsg == 'getPhoneNumber:ok') {
					let sessionKey = getApp().globalData.session_key,
						data = result.detail.encryptedData,
						iv = result.detail.iv,
						userId = this.uId
					this.util.request({
						url: this.api.jm,
						method: 'POST',
						data: {
							userId,
							sessionKey,
							data,
							iv
						}
					}).then(res => {
						res.data && this.$emit('refresh', res.data)
						this.refreshUser({
							get: 1,
						})
						console.log(res)
					})
					console.log(sessionKey, data, iv)
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '授权手机号失败',
						showCancel: false
					});
					return;
				}
			}
		}
	}
</script>
<style scoped lang='scss'>
	/*  #ifdef MP-ALIPAY*/
	/*  #endif  */
</style>
